import { Form, Input } from "antd";
import { forwardRef, ForwardRefRenderFunction, HTMLAttributes, useCallback, useContext, useImperativeHandle, useMemo, useRef } from "react";
import { ConfigurePageContentItem, SwiperItem } from "../../../ConfigurePageType";
import { cloneDeep } from "lodash";
import { ConfigurePageContext } from "../../../ConfigurePage";
import ExtraTable, { ExtraTableRef } from "@/components/dataEntry/ExtraTable";
import { StyledSwiperForm } from "../../../ConfigurePage.styled";

export interface SwiperFormRef {
	initValues: (currentContent?: ConfigurePageContentItem[]) => void;
}
interface SwiperFormProps {
	currentImgIndex: number | undefined; // 图片索引
	selectedIndex: number; // 模块索引
	className: HTMLAttributes<HTMLDivElement>["className"];
}
interface ExtraRecord {
	_key: string;
	_value: string;
}
const SwiperForm: ForwardRefRenderFunction<SwiperFormRef, SwiperFormProps> = ({ currentImgIndex, selectedIndex, className }, ref) => {
	useImperativeHandle(ref, () => ({
		initValues,
	}));
	const extraTableRef = useRef<ExtraTableRef | null>(null);
	if (currentImgIndex === undefined) return <></>;
	const { content, setContent } = useContext(ConfigurePageContext);
	const list = useMemo(() => content[selectedIndex].list as SwiperItem[], [content, selectedIndex]);
	const changeSwiperItem = useCallback(
		(item: Partial<SwiperItem>) => {
			if (currentImgIndex === undefined) return;
			const copiedContent = cloneDeep(content);
			copiedContent[selectedIndex].list[currentImgIndex] = { ...copiedContent[selectedIndex].list[currentImgIndex], ...item };
			setContent(copiedContent);
		},
		[currentImgIndex, content, selectedIndex]
	);
	const initValues = useCallback(
		(currentContent?: ConfigurePageContentItem[]) => {
			const { extra } = (currentContent?.[selectedIndex].list[currentImgIndex] as SwiperItem) || list[currentImgIndex];
			extraTableRef.current?.initValues(extra);
		},
		[list, currentImgIndex]
	);
	const reflectExtra = (data: ExtraRecord[]) => {
		const copiedData = cloneDeep(data);
		if (copiedData.length === 1 && copiedData[0]._key === "" && copiedData[1]._value === "") {
			changeSwiperItem({ extra: {} });
		} else {
			changeSwiperItem({ extra: copiedData.map(({ _key, _value }) => ({ [_key]: _value })).reduce((pre, item) => ({ ...pre, ...item }), {}) });
		}
	};

	return (
		<div className={`w-full flex justify-center ${className || ""}`}>
			<StyledSwiperForm className="mt-10" labelAlign="left" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
				<Form.Item label="跳转链接">
					<Input placeholder="请填写跳转链接" onChange={e => changeSwiperItem({ link: e.target.value })} value={list[currentImgIndex].link} />
				</Form.Item>
				<Form.Item label="图片色调">
					<Input
						placeholder="请选择图片色调"
						type="color"
						onChange={e => changeSwiperItem({ primaryColor: e.target.value })}
						value={list[currentImgIndex].primaryColor}
					/>
				</Form.Item>
				<Form.Item label="css样式">
					<Input.TextArea
						placeholder="请输入css样式"
						onChange={e => changeSwiperItem({ style: e.target.value })}
						value={list[currentImgIndex].style}
					/>
				</Form.Item>
				<Form.Item label="图片额外信息">
					<ExtraTable ref={extraTableRef} reflectExtra={reflectExtra} />
				</Form.Item>
			</StyledSwiperForm>
		</div>
	);
};

export default forwardRef(SwiperForm);

